import { LeftOutlined, RightOutlined } from "@ant-design/icons"
import { CollapseType } from "antd/es/layout/Sider"
import React, { useEffect, useMemo } from "react"

import { WrapperMenu } from "../../index.styled"
import { MenuInfo, MenuItem, SelectEventHandler } from "../../types"
import { GlobalLogo } from "../globalLogo"
import { ArrowButton, SiderVertical } from "./index.styled"

interface VerticalSiderProps {
	collapsed: boolean
	setCollapsed: (collapsed: boolean) => void
	defaultSelectedKeys?: string[]
	defaultOpenKeys?: string[]
	currentSideMenus: MenuItem[]
	onOpenChange?: (openKeys: string[]) => void
	hideButton?: boolean
	selectedKeys?: string[]
	openKeys?: string[]
	onSelect?: SelectEventHandler
	onCollapse?: (collapsed: boolean, type: CollapseType) => void
	onClick?: (info: MenuInfo) => void
}

const VerticalSider: React.FC<VerticalSiderProps> = ({
	collapsed,
	setCollapsed,
	defaultOpenKeys,
	defaultSelectedKeys,
	onOpenChange,
	currentSideMenus,
	hideButton,
	selectedKeys,
	openKeys,
	onSelect,
	onCollapse
	// onClick
}) => {
	const logoStyle = useMemo(() => {
		return {
			// height: theme.header.height + 'px',
			// width: !app.siderCollapse
			//   ? theme.sider.width + 'px'
			//   : theme.sider.collapsedWidth + 'px',
			height: 56,
			width: !collapsed ? 220 : 0,
			transition: "width 0.3s ease-in-out"
		}
	}, [collapsed])
	// if (hideButton) setCollapsed(true)

	useEffect(() => {
		if (hideButton) setCollapsed(true)
		else setCollapsed(false)
	}, [hideButton])

	return (
		<SiderVertical
			// The issue relate to conflict the theme of styled-components: https://github.com/styled-components/styled-components/issues/4182
			// customTheme={theme}
			customTheme="light"
			collapsed={collapsed}
			collapsedWidth={0}
			width={220}
			onCollapse={onCollapse}
		>
			<GlobalLogo $showtitle={!collapsed} $showlogo={false} styleGlobalLogo={logoStyle} />
			<WrapperMenu
				mode="inline"
				theme="dark"
				items={currentSideMenus}
				defaultSelectedKeys={defaultSelectedKeys}
				defaultOpenKeys={defaultOpenKeys}
				selectedKeys={selectedKeys}
				openKeys={openKeys}
				onOpenChange={onOpenChange}
				onSelect={onSelect}
			/>
			{!hideButton && (
				<ArrowButton icon={collapsed ? <RightOutlined /> : <LeftOutlined />} onClick={() => setCollapsed(!collapsed)} />
			)}
		</SiderVertical>
	)
}

export default React.memo(VerticalSider)
